<template>
  <div class="right-container flex-v flex-b g-card h-100">
    <div class="card-brand border">个人信息</div>
    <div class="f1">
      <div class="userinfo flex align-center">
        <img :src="avatar" crossorigin="anonymous" alt="" class="avatar" @error="setErrImg">
        <div class="f1 flex-v flex-b">
          <div class="sub">只支持JPG、JPEG或PNG格式的图片文件</div>
          <div class="flex align-center btn-list">
            <el-upload
              ref="upload"
              :action="oss + '/cloudcut-api/userinfo/upload'"
              :headers="headers"
              :data="uploadParam"
              :limit="1"
              :show-file-list="false"
              :auto-upload="true"
              accept="image/*"
              :file-list="fileList"
              :on-change="handleChange"
              :on-success="handleImageSuccess"
            >
              <el-button type="primary" size="small">更改头像</el-button>
            </el-upload>

            <!-- <div class="link pointer">删除图像</div> -->
          </div>
        </div>
      </div>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-position="top"
        class="demo-ruleForm"
      >
        <div class="grid-2">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" class="transparent" />
          </el-form-item>
          <el-form-item label="微信号" prop="wxchat">
            <el-input v-model="ruleForm.wxchat" class="transparent" />
          </el-form-item>
          <el-form-item label="Email" prop="email">
            <el-input v-model="ruleForm.email" class="transparent" />
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="ruleForm.phoneNumber" class="transparent" />
          </el-form-item>
        </div>

        <div class="card-brand" style="margin-top: 20px">所在地</div>
        <div class="grid-2">
          <el-form-item label="省/直辖市" prop="state">
            <el-select
              v-model="ruleForm.state"
              placeholder="请选择"
              class="transparent"
              @change="changeProvience"
            >
              <el-option
                v-for="item in provienceList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="市/市区" prop="city">
            <el-select
              v-model="ruleForm.city"
              placeholder="请选择"
              class="transparent"
              :disabled="!ruleForm.state"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="ruleForm.address" class="transparent" />
          </el-form-item>
          <el-form-item label="邮政编码" prop="postalCode">
            <el-input v-model="ruleForm.postalCode" class="transparent" />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="flex-e align-center">
      <el-button
        type="primary"
        size="small"
        @click="save"
      >保存个人资料</el-button>
      <!-- <el-button
        type="primary"
        size="small"
        @click="save"
      >编辑个人资料</el-button> -->
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { updateUserInfo } from '@/api/user'
export default {
  name: 'PersonalSetting',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback()
      }
      if (value.length !== 11) {
        callback(new Error('请输入正确的手机号'))
      }
    }
    return {
      avatar: require('@/assets/images/logo.png'),
      ruleForm: {
        username: '',
        wxchat: '',
        email: '',
        phoneNumber: '',
        state: '',
        city: '',
        address: '',
        postalCode: ''
      },
      rules: {
        email: [
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        phoneNumber: [
          { validator: validatePhone, trigger: ['blur', 'change'] }
        ]
      },
      provienceList: [],
      cityList: [],
      userInfo: {},
      fileList: [],
      uploadParam: {
        file: ''
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Access-Token': getToken(),
        'X-Login-Type': 'user'
      }
    },
    oss() {
      return this.$oss
    }
  },
  created() {
    this.init()
  },
  methods: {
    async changeProvience(e) {
      this.ruleForm.city = ''
      this.cityList = await this.$store.dispatch('user/getCityList', e)
    },
    async init() {
      this.provienceList = await this.$store.dispatch('user/getProvienceList')
      this.userInfo = this.$store.state.user.userInfo
      this.avatar = this.$getUrl(this.$store.state.user.avatar)
      if (this.userInfo.state) {
        this.cityList = await this.$store.dispatch('user/getCityList', this.userInfo.state)
      }
      for (const key in this.ruleForm) {
        if (this.userInfo[key]) {
          this.ruleForm[key] = this.userInfo[key]
        }
      }
    },
    async save() {
      const res = await updateUserInfo(this.ruleForm)
      if (res.success) {
        this.$message.success('修改成功')
        this.init()
      } else {
        this.$message.error(res.message)
      }
    },
    setErrImg(e) {
      this.$setErrImg(e)
    },
    async handleChange(file) {
      this.uploadParam = {
        file
      }
      this.avatar = URL.createObjectURL(file.raw)
    },
    handleImageSuccess(res) {
      console.log(res)
      this.$message.success('修改成功')
      if (res.success) {
        const url = res.result.url
        this.$store.commit('user/SET_AVATAR', url)
        this.avatar = this.$getUrl(this.$store.state.user.avatar)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(113, 128, 150, 1);
}
.right-container {
  width: 7.6rem;
  box-sizing: border-box;
  .userinfo {
    margin-bottom: 30px;
  }
  .card-brand {
    margin-bottom: 26px;
  }
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
  }
  .avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin-right: 24px;
  }
  .link {
    font-size: 20px;
    margin-left: 16px;
  }
  .btn-list {
    margin-top: 16px;
  }
  .transparent {
    width: 100%;
    max-width: 290px;
  }
}
</style>
